<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="基本介绍">
        <ph-divider>theme:dark</ph-divider>
        <ph-nav @navigate="onNavigate" :current="cnav" theme="dark">
          <ph-sub-nav title="浏览器">
            <ph-nav-item action="chrome" icon="chrome">谷歌</ph-nav-item>
            <ph-nav-item action="firefox" icon="firefox">火狐</ph-nav-item>
            <ph-nav-item action="safari" icon="safari">苹果</ph-nav-item>
            <ph-nav-item action="ie" icon="internet-explorer">IE</ph-nav-item>
          </ph-sub-nav>
          <ph-nav-item action="/nav"> 导航 </ph-nav-item>
        </ph-nav>
        <ph-divider>theme:light</ph-divider>
        <ph-nav
          theme="light"
          @navigate="onNavigate"
          :current="cnav"
          justify="flex-end"
        >
          <ph-sub-nav title="浏览器">
            <ph-nav-item action="chrome" icon="chrome">谷歌</ph-nav-item>
            <ph-nav-item action="firefox" icon="firefox">火狐</ph-nav-item>
            <ph-nav-item action="safari" icon="safari">苹果</ph-nav-item>
            <ph-nav-item action="ie" icon="internet-explorer">IE</ph-nav-item>
          </ph-sub-nav>
          <ph-nav-item action="/nav"> 导航 </ph-nav-item>
        </ph-nav>
        <ph-divider>theme:primary</ph-divider>
        <ph-nav
          theme="primary"
          @navigate="onNavigate"
          :current="cnav"
          justify="flex-end"
        >
          <ph-sub-nav title="浏览器">
            <ph-nav-item action="chrome" icon="chrome">谷歌</ph-nav-item>
            <ph-nav-item action="firefox" icon="firefox">火狐</ph-nav-item>
            <ph-nav-item action="safari" icon="safari">苹果</ph-nav-item>
            <ph-nav-item action="ie" icon="internet-explorer">IE</ph-nav-item>
          </ph-sub-nav>
          <ph-nav-item action="/nav"> 导航 </ph-nav-item>
        </ph-nav>
        <ph-divider>theme:success</ph-divider>
        <ph-nav
          theme="success"
          @navigate="onNavigate"
          :current="cnav"
          justify="flex-end"
        >
          <ph-sub-nav title="浏览器">
            <ph-nav-item action="chrome" icon="chrome">谷歌</ph-nav-item>
            <ph-nav-item action="firefox" icon="firefox">火狐</ph-nav-item>
            <ph-nav-item action="safari" icon="safari">苹果</ph-nav-item>
            <ph-nav-item action="ie" icon="internet-explorer">IE</ph-nav-item>
          </ph-sub-nav>
          <ph-nav-item action="/nav"> 导航 </ph-nav-item>
        </ph-nav>
        <ph-divider>theme:danger</ph-divider>
        <ph-nav
          theme="danger"
          @navigate="onNavigate"
          :current="cnav"
          justify="flex-end"
        >
          <ph-sub-nav title="浏览器">
            <ph-nav-item action="chrome" icon="chrome">谷歌</ph-nav-item>
            <ph-nav-item action="firefox" icon="firefox">火狐</ph-nav-item>
            <ph-nav-item action="safari" icon="safari">苹果</ph-nav-item>
            <ph-nav-item action="ie" icon="internet-explorer">IE</ph-nav-item>
          </ph-sub-nav>
          <ph-nav-item action="/nav"> 导航 </ph-nav-item>
        </ph-nav>
        <ph-divider>theme:warning</ph-divider>
        <ph-nav
          theme="warning"
          @navigate="onNavigate"
          :current="cnav"
          justify="flex-end"
        >
          <ph-sub-nav title="浏览器">
            <ph-nav-item action="chrome" icon="chrome">谷歌</ph-nav-item>
            <ph-nav-item action="firefox" icon="firefox">火狐</ph-nav-item>
            <ph-nav-item action="safari" icon="safari">苹果</ph-nav-item>
            <ph-nav-item action="ie" icon="internet-explorer">IE</ph-nav-item>
          </ph-sub-nav>
          <ph-nav-item action="/nav"> 导航 </ph-nav-item>
        </ph-nav>
      </ph-tab-panel>
      <ph-tab-panel title="template">
        <ph-pretty>{{ demo }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="script">
        <ph-pretty>{{ script }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import {
  PhView,
  PhDivider,
  PhTabPanel,
  PhTab,
  PhNav,
  PhNavItem,
  PhSubNav,
} from "@/index";
import * as Data from "../data/nav";

export default defineComponent({
  components: {
    PhView,
    PhDivider,
    PhTabPanel,
    PhTab,
    PhNav,
    PhNavItem,
    PhSubNav,
  },
  setup() {
    const cnav = ref("/nav");
    const onNavigate = (v: string) => {
      cnav.value = v;
    };
    return {
      cnav,
      onNavigate,
      ...Data,
    };
  },
});
</script>
